<!DOCTYPE html>
<html>
<head>
    <title>测试支付弹窗</title>
    <script src="/vendor/jquery/jquery-3.6.0.min.js"></script>
    <script src="/vendor/layer/3.5.1/layer.js"></script>
</head>
<body>
    <h1>测试支付确认弹窗</h1>
    <button onclick="testDialog()">测试弹窗</button>
    
    <script>
        function testDialog() {
            console.log('开始测试弹窗');
            console.log('Layer库是否加载:', typeof layer !== 'undefined');
            
            if(typeof layer === 'undefined') {
                alert('Layer库未加载');
                return;
            }
            
            layer.confirm('请确认您的支付是否成功？', {
                title: '支付确认',
                btn: ['支付成功', '支付失败'],
                icon: 3,
                shade: 0.6,
                area: ['400px', '200px']
            }, function(index){
                console.log('用户点击支付成功');
                layer.close(index);
                alert('跳转到订单详情页面');
            }, function(index){
                console.log('用户点击支付失败');
                layer.close(index);
                alert('跳转到订单详情页面');
            });
        }
        
        // 模拟支付返回的情况
        function simulatePaymentReturn() {
            localStorage.setItem('payment_initiated', 'true');
            window.location.reload();
        }
        
        // 页面加载时检查
        window.onload = function() {
            var paymentInitiated = localStorage.getItem('payment_initiated');
            if(paymentInitiated === 'true') {
                console.log('检测到支付返回标记');
                localStorage.removeItem('payment_initiated');
                setTimeout(() => {
                    testDialog();
                }, 1000);
            }
        }
    </script>
    
    <br><br>
    <button onclick="simulatePaymentReturn()">模拟支付返回</button>
</body>
</html>
